<template>
  <div class="component-manage m-flex-layout">
    <!-- tabs -->
    <a-tabs class="m-main" :spinning="loading" v-model:activeKey="activeKey" tab-position="top" type="">
      <a-tab-pane v-for="item in tabs" :key="item.id" :tab="item.groupName">
        <component-list
          :isView="isView"
          :group-id="item.id"
          :componentType="componentType"
          ref="listRef"
          :groupList="tabs"
          v-if="item.id === activeKey"
        />
      </a-tab-pane>
      <template #rightExtra>
        <a-button @click="handleAdd" v-show="!isView">新增分组</a-button>
        <a-button @click="handleEdit" v-show="tabs.length && !isView">编辑分组</a-button>
        <a-button @click="handleDel" v-show="tabs.length && !isView">删除分组</a-button>
      </template>
    </a-tabs>
    <!-- 分组的表单 -->
    <group-form ref="groupForm" @submit="submit" />
  </div>
</template>

<script>
import ComponentList from './components/ComponentList.vue'
import GroupForm from './components/GroupForm.vue'
import componentApi from '@/api/management/component'
import { get } from '@/utils'
/**
 * 组件管理
 * @author 朱琦
 * @date   时间：2023/1/9
 */
export default {
  name: 'ComponentManage',
  components: { ComponentList, GroupForm },
  data() {
    return {
      tabs: [],
      activeKey: 1,
      loading: false
    }
  },
  props: {
    // 是否只能查看
    isView: {
      default: false,
      type: Boolean
    },
    // 组件类型 查询用 可为空
    componentType: {
      type: String,
      default: null
    }
  },
  computed: {
    currentIndex() {
      return this.tabs.findIndex(i => i.id === this.activeKey)
    }
  },
  created() {},
  mounted() {
    this.getData()
  },
  methods: {
    /**
     * 获取分组信息
     */
    getData() {
      this.loading = true
      componentApi
        .getComponentGroupList({})
        .then(res => {
          this.tabs = res.data || []
          if (this.tabs.length) {
            this.activeKey = this.tabs[0].id
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    /**
     * 点击新增分组
     */
    handleAdd() {
      this.$refs.groupForm.show()
    },
    /**
     * 点击编辑分组
     */
    handleEdit() {
      this.$refs.groupForm.show(false, this.tabs[this.currentIndex])
    },
    /**
     * 点击删除分组
     */
    handleDel() {
      const listRefInstance = this.$refs['listRef']
      if (listRefInstance && Array.isArray(listRefInstance) && listRefInstance.length) {
        //  分组下  无组件才可进行删除
        console.log('listRefInstance', listRefInstance)
        const data = get(listRefInstance, '0.$data.data', [])
        if (data.length) {
          return this.$message.error('请确保当前分组下没有组件再进行删除')
        }
      }
      this.$confirm({
        title: '确定删除该分组？',
        onOk: () => {
          componentApi
            .deleteComponentGroup({ id: this.activeKey })
            .then(res => {
              this.$message.success('删除成功')
              this.tabs.splice(this.currentIndex, 1)
              this.activeKey = this.tabs.length ? this.tabs[0].id : null
            })
            .catch(() => {
              this.$message.error('删除失败')
            })
        }
      })
    },
    /**
     * 数据提交
     * @param {Object} data 数据
     * @param {Boolean} isAdd 是否是新增
     */
    submit(data, isAdd) {
      if (isAdd) {
        // 新增
        componentApi.addComponentGroup(data).then(res => {
          this.getData()
          this.$refs.groupForm.hide()
          this.$message.success('新增成功')
        })
      } else {
        // 调用更新接口
        componentApi.updateComponentGroup(data).then(() => {
          this.getData()
          this.$message.success('修改成功')
          this.$refs.groupForm.hide()
        })
      }
    },

    /**
     * 获取点击的数据
     *
     */
    getSelectData() {
      if (this.$refs.listRef.length) return this.$refs.listRef[0].getSelectData()
      else return null
    }
  }
}
</script>

<style scoped lang="less">
.component-manage {
  .ant-btn {
    margin-left: 15px;
  }
}
/deep/ .ant-tabs-content {
  height: 100%;
}
</style>
